<template>
    <el-card>
        <div class="flex flex-jc-sb border-bottom pd-b-10">
            <div class="fs-14 bold">保司列表</div>
            <div v-if="false" class="pointer" @click="showAdd"><el-icon>
                    <CirclePlus />
                </el-icon></div>
        </div>
        <div>
            <div v-for="(i, index) in companyList" :key="index" class="flex flex-jc-sb items-center flex-item mg-t-10 pd-6"
                :class="{ 'active': active === i.code }">
                <div class="flex items-center" @click="handleClick(i)">
                    <el-popover :width="200" trigger="hover">
                        <template #reference>
                            <div class="flex items-center pointer">
                                <el-image style="width: 40px; height: 40px" crossorigin="anonymous" :src="i.logo" fit="cover" />
                            </div>
                        </template>
                        <template #default>
                            <div class="flex items-center pointer mg-b-10">
                                <el-image style="width: 42px; height: 42px" crossorigin="anonymous" :src="i.logo" fit="cover" />
                                <div class="mg-l-10">
                                    <div>
                                        <span class="fs-14 fc-main">{{ i.name }}</span>
                                    </div>
                                    <div>
                                        <span class="fs-12 fc-lightgrey">{{ i.insureMode }}</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="fs-12 fc-grey">
                                    <span>保司编码：</span>
                                    <span>{{ i.code }}</span>
                                </div>
                            </div>
                            <div>
                                <div class="fs-12 fc-grey">
                                    <span>出单类型：</span>
                                    <span>{{ i.insureMode }}</span>
                                </div>
                            </div>
                        </template>
                    </el-popover>
                    <div class="mg-l-10 pointer">
                        <div>
                            <span class="fs-14">{{ i.name }}</span>
                            <span class="fs-12 fc-grey"></span>
                        </div>
                        <div>
                            <span class="fs-12 fc-lightgrey">{{ i.code }}</span>
                        </div>
                    </div>
                </div>
                <div v-if="false" class="mg-r-10 pointer">
                    <el-dropdown trigger="click" @command="handleCommond($event, i)">
                        <el-icon>
                            <MoreFilled />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="list">方案列表</el-dropdown-item>
                                <el-dropdown-item command="remove">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </el-card>
    <addInsureCompany v-model:show="showAddInsureCompany" @success="getList" />
    <insureCompanyList v-model:show="showList" :cur-item="curItem"/>
</template>
<script setup>
import { ref, onMounted, onActivated} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getInsureCompanyList, removeInsureCompany } from 'api/insure/longTerm.ts'
import addInsureCompany from '../dialog/addInsureCompany.vue'
import insureCompanyList from '../dialog/insureCompanyList.vue'

const showAddInsureCompany = ref(false)
const showList = ref(false)

const companyList = ref([])

const curItem = ref({})

const active = ref('')

const emits = defineEmits(['insureInfo'])

const showAdd = () => {
    showAddInsureCompany.value = true
}

const handleCommond = (ev, item) => {
    switch (ev) {
        case 'list':
            curItem.value = item
            showList.value = true
            break
        case 'remove':
            ElMessageBox.confirm(
                '删除方案后,对应方案列表将获取不到,是否删除?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    removeInsureCompany(item.code).then(res => {
                        ElMessage.success({
                            message: '删除成功'
                        })
                        getList()
                    })
                })
                .catch(() => {

                })
            break
        default:
            break
    }
}
const getList = () => {
    getInsureCompanyList({
        type: 2,
        pageSize: 100
    }).then(res => {
        companyList.value = res.rows
        active.value = companyList.value[0].code
        emits('insureInfo', companyList.value[0])
    })
}

const handleClick = (item) => {
    active.value = item.code
    emits('insureInfo', item)
}

onMounted(() => {
    getList()
})
onActivated(() => {
    getList()
})
</script>
<style lang="scss" scoped>
.flex-item {
    border-radius: 6px;

    &.active {
        background: #EBEFFE;
    }
}
</style>